<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport'
    content='width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0'>
  <title>携程在手, 说走就走</title>
  <!--引入移动端初始化页面-->
  <link rel="stylesheet" href="css/normalize.css">
  <!--引入页面的样式-->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <!--顶部搜索头部start-->
  <header class="header">
    <div class="search">
      <p>搜索: 目的地/酒店/景点/航班号</p>
    </div>
    <a class="user">
      <i></i>
      登录
    </a>
  </header>
  <!--头部end-->

  <!--焦点图模块 star-->
  <div class="focus" id="focus">
    <!--创建一个ul用来存放图片-->
    <ul id="imgList">
      <li><img src="upload/focus_1.jpg" alt=""></li>
      <li><img src="upload/focus_2.webp" alt=""></li>
      <li><img src="upload/focus_3.webp" alt=""></li>
      <li><img src="upload/focus_4.webp" alt=""></li>
      <li><img src="upload/focus_5.webp" alt=""></li>
    </ul>

    <!-- 创建导航按钮 -->
    <div class="navDiv" id="navDiv">
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
    </div>
  </div>
  <!--焦点图模块 end-->

  <!--局部导航栏 start-->
  <ul class="local-nav">
    <li>景点.玩乐</li>
    <li>周边游</li>
    <li>美食林</li>
    <li>一日游</li>
    <li>当地攻略</li>
  </ul>
  <!--局部导航栏 end-->

  <!--nav部分 start-->
  <div class="nav">
    <div class="nav-common">
      <div class="nav-items item1">
       <a href="#">酒店</a>
        
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">海外酒店</a>
        <a href="#">特价酒店</a>
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">团购</a>
        <a href="#">民宿.客栈</a>
      </div>
    </div>
    <div class="nav-common">
      <div class="nav-items item2">
       <a href="#">机票</a>
        
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">火车票</a>
        <a href="#">特价机票</a>
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">汽车票.船票</a>
        <a href="#">专车.租车</a>
      </div>
    </div>
    <div class="nav-common">
      <div class="nav-items item3">
       <a href="#">旅游</a>
        
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">门票</a>
        <a href="#">目的地攻略</a>
      </div>
      <div class="nav-items">
        <a href="#" class="a_bb">邮轮旅行</a>
        <a href="#">旅行定制</a>
      </div>
    </div>
  </div>
  <!--nav部分 start-->

  <!--侧导航栏-->
  <ul class="subnav-entry">
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>WiFi电话卡</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>保险.签证</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>外币兑换</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>购物</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <sp>当地向导</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>自由行</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>境外玩乐</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>礼品卡</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>信用卡</p>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="subnav-entry-icon"></span>
        <p>更多</p>
      </a>
    </li>
    
  </ul>

  <!--销售模块 start-->
  <div class="sales-box">
    <div class="sales-hd">
      <h2>
        <p>热门活动</p>
      </h2>
      <a href="#">获取更多福利</a>
    </div>
    <div class="salse-bd">
      <ul>
        <li>
          <a href="#">
            <img src="upload/pic1.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic2.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic3.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic4.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic5.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic6.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!--销售模块 end -->

  <!--bottom-nav start-->
    <div class="bottom-nav">
      <ul>
        <li>
          <a href="#">
            <span></span>
            <p>电话预定</p>
          </a>
        </li>
        <li>
          <a href="#">
            <span></span>
            <p>下载客户端</p>
          </a>
        </li>
        <li>
          <a href="#">
            <span></span>
            <p>我的</p>
          </a>
        </li>
      </ul>
      
    </div>
  <!--bottom-nav end-->

  <!--版权 start-->
    <div class="coyp_right">
      <span>
        <a href="#">网站地图 | </a>
        <a href="#" class="icon">&nbsp;&nbsp;&nbsp;&nbsp;language</a>
        <a href="#"> | 电脑版</a>
      </span>
      <i>
        ©2018 | 沪ICP备08023580号
      </i>
    </div>
  <!--版权 end-->


  <!-- 引入js文件 -->
  <script src="js/index.js"></script>
  <!--引入tools文件-->
  <script src="js/tools.js"></script>
</body>

</html>